<template>
  <div>
    <div class="block">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="-"
        value-format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <el-button @click="dymamicDisable">动态禁用</el-button>

    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="value2"
        type="daterange"
        range-separator="-"
        value-format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    dymamicDisable() {
      this.fstartDate = this.value1[0];
      this.fendDate = this.value1[1];
    },
  },
  computed: {
    pickerOptions() {
      let that = this;
      return {
        disabledDate(time) {
          console.log(new Date(time).toLocaleDateString());
          let maxDate = Date.parse(that.fendDate); //YYYY-MM-DD转为毫秒级时间戳
          let minDate = Date.parse(that.fstartDate); //
          return time.getTime() >= maxDate || time.getTime() <= minDate;
        },
      };
    },
  },
  data() {
    return {
      fstartDate: "",
      fendDate: "",
      value1: [],
      value2: "",
    };
  },
};
</script>